Note: This is somewhat of a prototype for what could be supported in AMP itself as seamless page transitions: ampproject/amphtml#12981 / ampproject/amphtml#14738

For a theme to support app shell via the AMP plugin, the bare minimum that needs to be done is:

0. Activate on PWA plugin.
1. Ensure your theme (and plugins) work entirely in the AMP plugin's Transitional mode. You must use Transitional mode as opposed to Standard mode for now. Make sure that you have “Serve all templates as AMP regardless of what is being queried” enabled.
2. Identify the element that contains the markup that changes as you navigate from page to page and wrap it with two function calls to indicate where the app shell container is:

<?php amp_start_app_shell_content(); ?>
    <?php get_template_part( 'content' ); ?>
<?php amp_end_app_shell_content(); ?>

3. Opt-in to AMP theme support for app shell by adding the following to your functions.php:

add_theme_support( 'amp', array(
    'paired' => true,
    'app_shell' => true,
) );

4. You should define an offline.php template in your theme.
5. [Deprecated] You should mark for precaching any scripts and stylesheets needed by the app shell. This can be done via:

wp_style_add_data( 'foo-special-colors', 'precache', true );
wp_script_add_data( 'bar-special-behavior', 'precache', true );

For theme which adds support for AMP app shell see https://github.com/xwp/twentyseventeen-westonson. Note that this theme copies some code from the Twenty Seventeen parent theme in order to add make the necessary modifications. For example, the js/global.js file modified as per this diff. The theme has app shell behind a theme mod flag, so make sure you do wp theme mod set service_worker_navigation amp_app_shell via WP-CLI. See also how it adds skeleton content to the app shell. See also plugin to enable stale-while-revalidate caching strategy for navigation requests.

This was presented at CDS 2018; see related portion of talk.

For a demo of the app shell theme in action, see https://dev-showcase-pwa.pantheonsite.io/

See also this short screen cast: https://youtu.be/oAiIbhHdoXM

For some more background on this, see GoogleChromeLabs/pwa-wp#12 (comment)

Todo

• Identify the element that contains the content
• Add a query var which is used to obtain the document without the content being populated; add another query var which is used to omit the content for the shell response. Make sure this is done before sanitizers run.
• Preserve admin bar in shadow DOM.
• Add dedicated element which contains the content regardless of the id.
• Ensure all style and link elements get preserved during content isolation.
• Add Shadow DOM JS in outer shell request.
• Let shadow root element be direct child of content element. This avoids styling problems.
• Synchronize title.
• Synchronize body classes.
• Synchronize nav menu item classes.
• Add JS which is responsible for history management, navigation, fetching, and invoking Shadow DOM API. Intercept the clicks on links in the shell and in the shadow to then load the new shadow doc.
• Bootstrap spa onto frontend, automatically swap out content with shadow DOM AMP doc when navigating to another page? This handles case of smooth transition when navigating after landing on a site for the first time before the service worker is installed. Afterward, the app she would be served instead.
• Fix lack of trailing slash causes redirect which drops the required app shell query param.
• Trigger an event on the document when a page is transitioned.
• Transfer admin bar from shadow to shell document.
• Use AMP Shadow streaming API.
• Update the class name for the menu item the instant that it is clicked.
• Flag that the deprecation of the non-streaming API would break this.
• Use async external script. Include in precache.
• When declaring theme support, include the script handles to print in addition to shadow API script.
• Make sure that the AMP runtime does not conflict with our custom script which intercept clicks.
• When content is extracted in shell, make sure that shell serves skeleton initially.
• Make sure app shell has revision. Vary cache by navigation menus, theme mods, etc.
• Figure out injecting into service worker for navigation. Disable preload and then override entirely the URL that is served.
• Make sure app shell is precached, as well as offline and error inners
• Implement two methods of integrating app shell: bootstrapping app shell onto SW-unmanaged page, and another where app shell loads the content from the start.
• Synchronize meta (link, meta, JSON-LD, etc)
• Omit admin bar from shell? Or rather, prevent app shell entirely if user is logged-in?
• Allow shadow doc request to respond with 400 if amp is disabled and so then cause navigation at top? No, just do not follow redirects from ?amp to not-?amp. If such a redirect happens, navigate the entire page.
• Stale while revalidate will be able to update. This can be done even on streaming by leaving script in the page which listens for broadcast update.
• Make sure that the app shell serves the appropriate initial body class based on whether or not the homepage is initially requested.
• Preserve amp-analytics in shadow DOM; analytics needs to be excluded from app shell.
• When requesting app shell contents force accepting sanitization
• How can we handle a case where a user navigate to a URL that has amp disabled. Add a fury fragment to indicate that the service worker should bypass the use of the app shell
• Scroll to content of it is out of view on mobile.
• Prevent navigation when # anchor link.
• Add support for navigating to anchors on other URLs.
• Download web components API JS to serve locally.